<template>
    <div>
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="阳光客户" title="客户管理"></crumbs>
        </div>
        <div class="w-full box-border p-16px">
            <div class="w-full bg-#ffffff rounded-4px box-border p-16px mb-16px">
                <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" showExport
                    @export="onExport" />
            </div>
            <div class="w-full bg-#ffffff rounded-4px box-border p-16px">
                <tableComponent class="set-height" :table-header="tableHeader" border :table-data="tableData"
                    v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
                    <template #companyName>
                        <el-table-column prop="date" label="客户名" align="center" min-width="300" fixed>
                            <template #default="scope">
                                <div>
                                    <el-tag v-if="scope.row.auditStatus === 1">通过</el-tag>
                                    <el-tag v-if="scope.row.auditStatus === 2" class="ml-2" type="danger">驳回
                                    </el-tag>
                                    <el-tag v-if="scope.row.auditStatus === 0" class="ml-2" type="info">待审核
                                    </el-tag>
                                    {{ scope.row.companyName }}
                                </div>
                                <div class="b_d" v-if="scope.row.companyAbbreviation">
                                    {{ scope.row.companyAbbreviation }}
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #isOpenPaySalary>
                        <el-table-column prop="isOpenPaySalary" label="子弹发薪" sortable="custom" align="center"
                            width="150">
                            <template #default="scope">
                                <div v-if="scope.row.isOpenPaySalary === 1">
                                    <div>已开通</div>
                                </div>
                                <div v-if="scope.row.isOpenPaySalary === 0">
                                    <div>未开通</div>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #isOpenCheckAttendance>
                        <el-table-column prop="isOpenCheckAttendance" label="电子考勤" sortable="custom" align="center"
                            width="150">
                            <template #default="scope">
                                <div v-if="scope.row.isOpenCheckAttendance === 1">
                                    <div>已开通</div>
                                </div>
                                <div v-if="scope.row.isOpenCheckAttendance === 0">
                                    <div>未开通</div>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #isOpenAdvance>
                        <el-table-column prop="isOpenAdvance" label="预资薪资" sortable="custom" align="center"
                            width="150">
                            <template #default="scope">
                                <div v-if="scope.row.isOpenAdvance === 1">
                                    <div>已开通</div>
                                </div>
                                <div v-if="scope.row.isOpenAdvance === 0">
                                    <div>未开通</div>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #isOpenSalarySlip>
                        <el-table-column prop="isOpenSalarySlip" label="电子工资条" sortable="custom" align="center"
                            width="150">
                            <template #default="scope">
                                <div v-if="scope.row.isOpenSalarySlip === 1">
                                    <div>已开通</div>
                                </div>
                                <div v-if="scope.row.isOpenSalarySlip === 0">
                                    <div>未开通</div>
                                </div>
                                <!-- 改成写死的已开通 -->
                                <!-- <div>已开通</div> -->
                            </template>
                        </el-table-column>
                    </template>
                    <template #isOpenDailyRecruit>
                        <el-table-column prop="isOpenDailyRecruit" label="日结快招" sortable="custom" align="center"
                            width="150">
                            <template #default="scope">
                                <div v-if="scope.row.isOpenDailyRecruit === 1">
                                    <div>已开通</div>
                                </div>
                                <div v-if="scope.row.isOpenDailyRecruit === 0">
                                    <div>未开通</div>
                                </div>
                            </template>
                        </el-table-column>
                    </template>

                    <template #isOpenPeriod>
                        <el-table-column prop="isOpenPeriod" label="长期保" sortable="custom" align="center" width="200">
                            <template #default="scope">
                                <div v-if="scope.row.isOpenPeriod === 1">
                                    <div>已开通</div>
                                    <div class="b_d flex-center">
                                        <el-tag v-if="scope.row.insureBlackList" class="ml-2" type="info"
                                            color="#BDBEC3"><span class="fc-black">拉黑</span>
                                        </el-tag>
                                        <el-tag v-if="scope.row.periodInsureStatus?.refusalGuaranteeStatus" class="ml-2"
                                            type="danger">拒保
                                        </el-tag>
                                        <el-tag v-if="scope.row.periodInsureStatus?.blockedAccount" class="ml-2"
                                            type="danger">冻结
                                        </el-tag>
                                        <el-tag v-if="scope.row.periodInsureStatus?.antiDatedPolicy" class="ml-2"
                                            type="danger">倒投保
                                        </el-tag>
                                    </div>
                                </div>
                                <div v-if="scope.row.isOpenPeriod === 0">
                                    <div>未开通</div>
                                    <el-tag v-if="scope.row.insureBlackList" class="ml-2" type="info"
                                        color="#BDBEC3"><span class="fc-black">拉黑</span>
                                    </el-tag>
                                </div>
                            </template>
                        </el-table-column>
                    </template>

                    <template #isOpenWesure>
                        <el-table-column prop="isOpenWesure" label="日日保" sortable="custom" align="center" width="150">
                            <template #default="scope">
                                <div v-if="scope.row.isOpenWesure === 1">
                                    <div>已开通</div>
                                    <div class="b_d flex-center">
                                        <el-tag v-if="scope.row.wesurBlackList" class="ml-2" type="info"
                                            color="#BDBEC3"><span class="fc-black">拉黑</span>
                                        </el-tag>
                                        <el-tag v-if="scope.row.weusreStatus?.refusalGuaranteeStatus" class="ml-2"
                                            type="danger">拒保
                                        </el-tag>
                                        <el-tag v-if="scope.row.weusreStatus?.blockedAccount" class="ml-2"
                                            type="danger">冻结
                                        </el-tag>
                                        <el-tag v-if="scope.row.weusreStatus?.antiDatedPolicy" class="ml-2"
                                            type="danger">倒投保
                                        </el-tag>
                                    </div>
                                </div>
                                <div v-if="scope.row.isOpenWesure === 0">
                                    <div>未开通</div>
                                    <el-tag v-if="scope.row.wesurBlackList" class="ml-2" type="info"
                                        color="#BDBEC3"><span class="fc-black">拉黑</span>
                                    </el-tag>
                                </div>
                            </template>
                        </el-table-column>
                    </template>

                    <template #isOpenTyrbStatus>
                        <el-table-column prop="isOpenTyrbStatus" label="团意日保" sortable="custom" align="center"
                            width="150">
                            <template #default="scope">
                                <div v-if="scope.row.isOpenTyrbStatus === 1">
                                    <div>已开通</div>
                                </div>
                                <div v-if="scope.row.isOpenTyrbStatus === 0">
                                    <div>未开通</div>
                                </div>
                            </template>
                        </el-table-column>
                    </template>

                    <template #isOpenEleSign>
                        <el-table-column prop="isOpenEleSign" label="电子签" sortable="custom" align="center" width="200">
                            <template #default="scope">
                                <div v-if="scope.row.isOpenEleSign === 1">
                                    <div>已开通</div>
                                </div>
                                <div v-if="scope.row.isOpenEleSign === 0">
                                    <div>未开通</div>
                                </div>
                            </template>
                        </el-table-column>
                    </template>

                    <template #channelName>
                        <el-table-column prop="channelName" label="所属项目" align="center" width="150">
                            <template #default="scope">
                                <div>
                                    <div v-if="scope.row.channelNameList?.length === 0">--</div>
                                    <div v-else v-for="(ele, i) in scope.row.channelNameList" :key="i">{{ ele }}</div>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                </tableComponent>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import crumbs from '../../components/crumbs.vue'
import filterComponent from '../../components/filterComponent/index.vue'
import tableComponent from '../../components/tableComponent/index.vue'
import { getclientsapi, getditchapi, exportYgCustomerApi, getYGCompanyList } from '@/api/api'
import baseurl from '@/api/env'
import { ElMessage } from 'element-plus'
const router = useRouter()
const filterData = ref({
    list: {
        companyName: {
            name: '客户名称',
            prop: 'companyName',
            value: '',
            placeholder: '请输入客户名称',
            type: 'input'
        },
        adminName: {
            name: '所属超管',
            prop: 'adminName',
            value: '',
            placeholder: '请输入所属超管',
            type: 'input'
        },
        // channelId: {
        //     name: '所属渠道',
        //     prop: 'channelId',
        //     value: '',
        //     placeholder: '请选择操作类型',
        //     type: 'select',
        //     options: [],
        //     defaultAttrs: {
        //         label: 'name',
        //         value: 'id'
        //     }
        // },
        channelName: {
            name: '所属渠道',
            prop: 'channelName',
            value: '',
            placeholder: '请输入所属渠道',
            type: 'input'
        },
        auditStatus: {
            name: '审核状态',
            prop: 'auditStatus',
            value: '',
            placeholder: '请选择审核状态',
            type: 'select',
            options: [
                {
                    value: '0',
                    label: '待审核',
                },
                {
                    value: '1',
                    label: '审核通过',
                },
                {
                    value: '2',
                    label: '审核驳回',
                },
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        },
        productType: {
            name: '产品类型',
            prop: 'productType',
            value: '',
            placeholder: '请选择产品类型',
            type: 'select',
            options: [
                {
                    value: '0',
                    label: '日日保',
                },
                {
                    value: '1',
                    label: '长期保',
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        },
        balanceType: {
            name: '余额状态',
            prop: 'balanceType',
            value: '',
            placeholder: '请选择余额状态',
            type: 'select',
            options: [
                {
                    value: '0',
                    label: '全部',
                },
                {
                    value: '1',
                    label: '有余额',
                },
                {
                    value: '2',
                    label: '余额为零',
                },
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        },
    },
    buttonList: [
    ]
})
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const tableData = ref([])

const tableHeader = ref([
    {
        label: '客户名',
        prop: 'companyName'
    },
    {
        label: '超级管理员',
        prop: 'adminName',
        width: 100
    },
    {
        label: '子弹发薪',
        prop: 'isOpenPaySalary'
    },
    {
        label: '电子考勤',
        prop: 'isOpenCheckAttendance'
    },
    {
        label: '预资薪资',
        prop: 'isOpenAdvance'
    },
    {
        label: '电子工资条',
        prop: 'isOpenSalarySlip'
    },
    {
        label: '日结快招',
        prop: 'isOpenDailyRecruit'
    },
    {
        label: '长期保',
        prop: 'isOpenPeriod'
    },
    {
        label: '日日保',
        prop: 'isOpenWesure'
    },
    {
        label: '团意日保',
        prop: 'isOpenTyrbStatus'
    },
    {
        label: '电子签',
        prop: 'isOpenEleSign'
    },
    {
        label: '渠道',
        prop: 'channelName'
    },
])
const sortField = ref('' as any)
const sortOrder = ref('' as any)
const sortMethod = (orderInfo: any) => {
    if (orderInfo.order) {
        const map: any = {
            ascending: 'ASC',
            descending: 'DESC'
        }
        sortField.value = orderInfo.prop,
            sortOrder.value = map[orderInfo.order]
    } else {
        sortField.value = null
        sortOrder.value = null
    }
    getData()
}

const getditch = () => {
    getditchapi().then((res: any) => {
        console.log(res, '渠道列表')
        // filterData.value.list.channelId.options = res
    })
}
const handlePageChange = () => {
    getData()
}
const handleSearch = () => {
    getData()
}
const onExport = async () => {
    console.log('导出')
    exportYgCustomer()
}
const exportYgCustomer = async () => {
    const res: any = await exportYgCustomerApi({
        companyName: filterData.value.list.companyName.value,
        auditStatus: filterData.value.list.auditStatus.value,
        adminName: filterData.value.list.adminName.value,
        pageSize: pageInfo.value.pageSize,
        channelName: filterData.value.list.channelName.value,
        pageNum: pageInfo.value.pageNum,
        balanceType: filterData.value.list.balanceType.value,
        isOpenWesure: filterData.value.list.productType.value === '1' ? 1 : '',
        isOpenTyrbStatus: filterData.value.list.productType.value === '3' ? 1 : '',
        isOpenPeriod: filterData.value.list.productType.value === '2' ? 1 : '',
        insurCompanyType: 'period_003_yg'
    })
    window.location.href =
        baseurl + '/common/download?delete=true&fileName=' + res
    console.log(res, '阳光客户导出')
    setTimeout(() => {
        ElMessage({
            message: '导出成功',
            type: 'success',
        })
    }, 1000)
}
const getData = async () => {
    const res: any = await getYGCompanyList({
        companyName: filterData.value.list.companyName.value,
        auditStatus: filterData.value.list.auditStatus.value,
        adminName: filterData.value.list.adminName.value,
        pageSize: pageInfo.value.pageSize,
        channelName: filterData.value.list.channelName.value,
        pageNum: pageInfo.value.pageNum,
        balanceType: filterData.value.list.balanceType.value,
        isOpenWesure: filterData.value.list.productType.value === '0' ? 1 : '',
        isOpenTyrbStatus: filterData.value.list.productType.value === '2' ? 1 : '',
        isOpenPeriod: filterData.value.list.productType.value === '1' ? 1 : '',
        insurCompanyType: 'period_003_yg',
        sortField: sortField.value,
        sortType: sortOrder.value,
    })
    pageInfo.value.total = res.totalCount
    tableData.value = res.list
}
// 返回上一级
const back = () => {
    router.back()
}
onMounted(async () => {
    // getditch()
    await getData()
})
</script>


<style lang="scss" scoped>
.flex-center {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.utilsbox {
    display: flex;
    align-items: center;

    .deleate {
        margin-right: 10px;
    }
}

.content {
    max-height: 800px;
    overflow: auto;
    box-sizing: border-box;
    margin: 16px;
}

.screen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    border-bottom: 2px solid #f4f4f7;

    .deleate {
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .bord {
        font-weight: 700;
    }

    img {
        margin-right: 10px;
        margin-top: 5px;
    }

    .clear {
        color: rgba(148, 151, 177, 1);
        font-size: 14px;
    }
}

.screen_condition {
    box-sizing: border-box;
    padding: 0 20px;
    margin-top: 16px;

    .formbox {
        margin-top: 16px;
        width: 100%;
        // box-sizing: border-box;
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        // gap: 30px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}

.table-list {
    //min-height: 580px;

    .b_d {
        padding-top: 10px;
        margin-top: 10px;
    }

    .pagination {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: end;
    }
}

.left_btn {
    width: 32px;
    height: 22px;

    img {
        width: 100%;
        height: 100%;
    }
}

.upfile {
    float: right;
    cursor: pointer;
}

.blue {
    color: #0256ff;
    text-align: center;
    cursor: pointer;
    margin-bottom: 5px;
}

.w-100 {
    width: 100px;
}

:deep(.el-date-editor.el-input) {
    width: 100%;
}

:deep(.reset-flex .el-input__wrapper) {
    display: flex;
}

.fc-black {
    color: #202536;
}
</style>
